<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
  /** 1.DOM Level 2 规范中描述的 MutationEvent 定义了一组会在各种 DOM 变化时触发的事件。由于浏览器事件的实现机制，这个
   *    接口出现了严重的性能问题。因此，DOM Level 3 规定废弃了这些事件。MutationObserver 接口就是为替代这些事件而设计的
   *    更实用、性能更好的方案。
   * 2.将变化回调委托给微任务来执行可以保证事件同步触发，同时避免随之而来的混乱。为 MutationObserver 而实现的记录队列，
   *   可以保证即使变化事件被爆发式地触发，也不会显著地拖慢浏览器。
   * 3.无论如何，使用 MutationObserver 仍然不是没有代价的。因此理解什么时候避免出现这种情况就很重要了。
   * **/

  /** 2.MutationObserver 的引用
   *    a.MutationObserver 实例与目标节点之间的引用关系是非对称的。MutationObserver 拥有对要观察的目标节点的弱引用。
   *      因为是弱引用，所以不会妨碍垃圾回收程序回收目标节点。
   *    b.然而，目标节点却拥有对 MutationObserver 的强引用。如果目标节点从 DOM 中被移除，随后被垃圾回收，则关联的 
   *      MutationObserver 也会被垃圾回收。
   * **/

  /** 3. MutationRecord 的引用
   *    a.记录队列中的每个 MutationRecord 实例至少包含对已有 DOM 节点的一个引用。如果变化是childList 类型，则会包含多
   *      个节点的引用。记录队列和回调处理的默认行为是耗尽这个队列，处理每个 MutationRecord，然后让它们超出作用域并被垃圾
   *      回收。
   *    b.有时候可能需要保存某个观察者的完整变化记录。保存这些 MutationRecord 实例，也就会保存它们引用的节点，因而会妨碍这
   *      些节点被回收。如果需要尽快地释放内存，建议从每个 MutationRecord中抽取出最有用的信息，然后保存到一个新对象中，最
   *      后抛弃 MutationRecord。
   * 
   * **/
</script>
</html>
